<template>
    <div>
        <el-tree :data="dataSource" node-key="id" ref="treeDom" default-expand-all :expand-on-click-node="false"
            @node-click="nodeClick" :props="{ class: 'tree-box' }">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span class="tree-btn" v-if="pageType != 'look'">
                        <el-button type="primary" link @click.stop="append('two', data, node)"
                            v-if="!data['isShowAddBtn']">新增
                        </el-button>
                        <el-button type="danger"  link @click.stop="remove(node, data)"
                            v-if="!data['isShowDelBtn'] && node.level != 1">删除</el-button>
                    </span>
                </span>
            </template>
        </el-tree>
        <subjectlLatitude :dialogVisible="dialogVisible" @handle-close="handleClose" v-if="dialogVisible"
            @on-update="updateData" :nodeData="nodeData" :budgetTemplateId="budgetTemplateId"></subjectlLatitude>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api/index'
import subjectlLatitude from './subjectlLatitude.vue'
import { dataListStore } from '@/store/modules/pubiclDataList'
import { onMounted } from 'vue'
const props = defineProps({
    dataSource: {
        type: Array,
        default: () => []
    },
    interFaceInfo: {
        default: () => {
            return {
                url: '',//接口名称
                params: {

                },// 参数
                fileName: ''
            }
        }
    },
    pageType: {
        type: String,
        default: 'add'
    },
    budgetTemplateId: {
        //模板 id 预算编制使用
        type: String,
        default: ''
    }

})

const emit = defineEmits(['on-nodeClick', 'on-update', 'on-deleteSubject'])

const dataStore = dataListStore()

const nodeData = ref({}) // 节点数据

const dialogVisible = ref(false)



const treeDom = ref(null)

onMounted(() => {

})

const remove = (node, data) => {
    console.log(node, data, '删除科目')
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            const parent = node.parent
            const children = parent.data.children || parent.data

            const index = children.findIndex((d) => d.budgetCategoryId === data.budgetCategoryId)
            const saveDataIndex = dataStore.selectAllSubjectList.findIndex((d) => d.budgetCategoryId === data.budgetCategoryId)
            let selectAllData = JSON.parse(JSON.stringify(dataStore.selectAllSubjectList))
            children.splice(index, 1)
            selectAllData.splice(saveDataIndex, 1)
            dataStore.submitSubjectId(selectAllData)
            props.dataSource = [...props.dataSource]
            ElMessage.success('操作成功')
            emit('on-deleteSubject', data.id)
        })
}
const nodeClick = (data, node, obj) => {
    emit('on-nodeClick', [data, node, obj])
}

const append = (soruce, data, node) => {
    nodeData.value = data
    dialogVisible.value = true
}



const updateData = (data) => {
    data.forEach(item => item.parentBudgetCategoryId = nodeData.value.budgetCategoryId)
    if (!nodeData.value.children) {
        nodeData.value.children = []
    }
    nodeData.value.children = [...nodeData.value.children, ...data]
    props.dataSource = [...props.dataSource]

    let selectAllData = JSON.parse(JSON.stringify(dataStore.selectAllSubjectList))

    const result = [...selectAllData, ...data]

    dataStore.submitSubjectId(result)

    emit('on-update', data)
}

const handleClose = () => {
    dialogVisible.value = false
}

</script>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.tree-btn {
    a {
        margin-right: 20px;
    }
}
</style>
<style lang="scss">
.tree-box {
    .el-tree-node__content {
        &:hover {
            background: #dcdfe6;
        }

    }

    .is-current {
        background: #dcdfe6;
    }
}
</style>